<template>
	<view class="container">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="top-tabar">
			<view class="arrow" @click="returing"></view>
			<view class="title-tbar">
				洗车
			</view>
			<!-- 添加一个空的占位元素保持平衡 -->
			<view class="placeholder"></view>
		</view>


		<view class="card-info">

			<view class="image">
				<image src="/static/nearbystores/ceshi.png" mode=""></image>
			</view>
			<view class="title-1">
				<view class="title-11">
					车百世汽车生活馆
				</view>
				<view class="number">
					556m
				</view>
			</view>
			<view class="title-2">
				<view class="score">
					<uni-rate size="18" :touchable="false" :value="3" @change="onChange" />
					<view class="score-number">
						{{score}}分
					</view>
					<view>
						销量：556
					</view>
				</view>
			</view>

			<view class="bottom-content">

				<view class="title-contain">
					<view class="merge-basic-Info">
						<view class="tit-con-1">
							营业时间：周一至周五
						</view>
						<view class="tit-con-2">
							早上8:00-晚上22:00
						</view>
					</view>
					<navigator open-type="navigate"
					 url="/pages/VehicleMaintenance/NearbyStores/guide01/guide01"
					  class="tit-con-3">
						<text class="addr">位置：山阳区人民路与解放路交叉口</text>
						<uni-icons class="local" type="paperplane-filled" color="#186dee" size="18"></uni-icons>
					</navigator>
				</view>
			</view>
		</view>
		
		<view class="card-price">
			<view class="title-service">
				服务项目
			</view>
			<view class="item-service">
				<view class="price-title">
					工时价格（每小时）
				</view>
				<view class="price">
					<view class="text-color">
						<view>￥35.9</view>
						<view>￥60</view>
					</view>
				</view>
			</view>
			
			<view class="item-service">
				<view class="price-title">
					轮胎
				</view>
				<view class="price">
					<view class="price">
						<view class="text-color">
							<view>￥35.9</view>
							<view>￥60</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="item-service">
				<view class="price-title">
					......
				</view>
				<view class="price">
					<view class="price">
						<view class="text-color">
							<view>￥35.9</view>
							<view>￥60</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="evaluate">
			<view class="titl">
				服务评价
			</view>
			<view class="eval-cont" v-for="i in 4">
				<view class="image">
					<image src="/static/nearbystores/ceshi.png" mode=""></image>
				</view>
				<view class="titl-content">
					<view class="top-1">
						<view class="name">
							黄**
						</view>
						<view class="date">
							2022-12-31
						</view>
					</view>
					<view class="top-2">
						<uni-rate size="10" :touchable="false" :value="3" @change="onChange" />
					</view>
					<view class="top-3">
						洗的非常干净,几个小伙子很用心，态度也很好，强烈推荐来这家店洗车！！！
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="btn">
			<button @click="toAppoint">立即预约</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const returing = () => {
		uni.navigateBack()
	}


	const score = ref(4)
	const rateValue = ref(3)
	const onChange = (e) => {
		console.log('rate发生改变:' + JSON.stringify(e))
		// console.log(this.rateValue);
	}
	
	const toAppoint =()=>{
		uni.navigateTo({
			url:'/pages/VehicleMaintenance/NearbyStores/appointWash/appointWash'
		})
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100vw;
		height: 100vh;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.title-tbar {
		color: white;
		font-size: 36rpx;
		text-align: center;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.top-tabar {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		background-color: #3486fd;
		min-height: 320rpx;
		padding: 20rpx;
		position: relative;
	}

	.arrow {
		border-top: 2rpx solid white;
		border-right: 2rpx solid white;
		height: 17rpx;
		width: 17rpx;
		margin-top: 15rpx;
		transform: rotate(225deg);
		flex-shrink: 0;
		z-index: 10;

		/* 添加点击效果 */
		&:active {
			opacity: 0.7;
			transform: rotate(225deg) scale(0.95);
		}
	}

	.placeholder {
		width: 20rpx;
		height: 20rpx;
		visibility: hidden;

	}





	.card-info {
		position: absolute;
		top: 80rpx;
		left: 0;
		right: 0;
		background-color: white;
		// width: 690rpx;
		margin: 20rpx 25rpx;
		border-radius: 30rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
		padding: 30rpx;
	}

	.number {
		font-size: 30rpx;
		color: #3486fd;
	}

	.title-1 {
		display: flex;
		justify-content: space-between;
	}

	.score {
		display: flex;
		margin-top: 5rpx;
		font-size: 20rpx;
	}

	.score view {
		margin-right: 30rpx;
	}

	.bottom-content {
		margin-top: 5rpx;
		display: flex;
	}

	image {
		width: 100%;
		height: 360rpx;
		border-radius: 24rpx;
		margin-right: 30rpx;
		margin-bottom: 30rpx;
	}

	.title-contain {
		// margin-left: 30rpx;
		font-size: 20rpx;
		padding: 10rpx;
	}

	.title-contain view {
		margin-bottom: 5rpx;
	}
	
	
	.merge-basic-Info{
		display: flex;
	}
	.merge-basic-Info view{
		margin-right: 20rpx;
	}
	.addr{
		margin-right: 20rpx;
		
	}
	
	.tit-con-3{
		display: flex;
	}
	
	
	.card-price{
		position: relative;
		background-color: white;
		margin-top: 400rpx;
		margin-left: 25rpx;
		margin-right: 25rpx;
		// margin: 20rpx 25rpx;
		border-radius: 30rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
		padding: 30rpx;
	}
	
		
		
	.item-service{
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #eee;
		padding: 10rpx 0;
		color: #4e4e4e;
		font-size: 25rpx;
	}
	
	.text-color{
		display: flex;
		align-items: center;
	}
	.text-color>view:nth-child(1){
		margin-right: 20rpx;
		font-size: 28rpx;
		color: red;
		// background-color: #3486fd;
	}
	.text-color>view:nth-child(2){
		text-decoration: line-through;
	}
	
	.evaluate{
		background-color: white;
		margin: 25rpx;
		padding: 25rpx;
		border-radius: 20rpx;
	}
	.titl{
		font-weight: bold;
		margin-bottom: 20rpx;
		margin-left: 4rpx;
	}
	.evaluate image{
		width: 100rpx;
		height: 100rpx;
		border-radius: 70rpx;
		
	}
	.eval-cont{
		display: flex;
		margin-top: 20rpx;
		border-bottom:1rpx solid #eee;
	}
	.titl-content{
		font-size: 25rpx;
	}
	.top-1{
		display: flex;
		justify-content: space-between;
		margin-bottom:10rpx;
	}
	.top-1 view:nth-child(2){
		color: #4e4e4e;
	}
	.top-2{
		margin-bottom:10rpx;
	}
	.top-3{
		font-size: 20rpx;
		margin-bottom:20rpx;
	}
	.btn{
		position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: white;
			padding: 20rpx;
			box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
			z-index: 1000;
	}
	.btn button{
		width: 100%;
			height: 80rpx;
			background-color: #3486fd;
			color: white;
			border-radius: 40rpx;
			font-size: 32rpx;
		
	}
</style>